<template>
	<!-- 全真模拟 -->
	<view class="simulation pd-30" :style="{ height: isEmpty ? '100%' : 'unset' }">
		<my-switch-navbar :activeTab.sync="activeTab" :tabName="tabName"></my-switch-navbar>
		<!-- <my-scroll-view scroll-y refresher-enabled :init="init"> -->
		<view class="container" v-show="activeTab === 0">
			<my-paper-list-item
				@click.native="viewResult(paper, 'startMoni', false)"
				answer
				score
				@start-exam="handleStart"
				:key="paper.paperid"
				v-for="paper in list"
				:item="paper"
			></my-paper-list-item>
		</view>
		<!-- </my-scroll-view> -->
		<view class="container" v-show="activeTab === 1">
			<view class="online-paper">
				<view class="operation">
					<view class="header"><text>组卷类型</text></view>
					<view class="btns">
						<view @click="createPaper(1)">
							<text class="type">一键组卷</text>
							<text class="info">自主组卷、只需一键</text>
						</view>
						<view @click="createPaper(2)">
							<text class="type">手动组卷</text>
							<text class="info">章节、题型自由设置</text>
						</view>
					</view>
				</view>
				<view class="paper-list">
					<view class="header">
						<text>试卷列表</text>
						<u-icon @click="readmore" color="#999" size="28upx" name="arrow-right" label="更多" label-pos="left"></u-icon>
							<!-- <my-icon  name="more-next" style="font-size:22upx;"></my-icon> -->
					</view>
					<view class="list">
						<my-paper-list-item
							@click.native="viewResult(paper, 'startUserPaper', false)"
							@start-exam="handleStart"
							:item="paper"
							v-for="paper in list"
							:key="paper.paperid"
						></my-paper-list-item>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore icon-type="flower" v-show="list.length || status === 'loading'" bg-color="#f5f5f5" :status="status" @loadmore="getPageData()" :margin-top="20" />
		<view :style="{ flex: isEmpty ? 1 : 'unset' }"><my-empty v-if="isEmpty"></my-empty></view>
	</view>
</template>

<script>
import exam from '../../mixins/exam.js';
/**
 * mode 3-全真模拟 4-组卷
 * */
export default {
	mixins: [exam],
	data() {
		return {
			tabName: ['模拟考试', '在线组卷'],
			activeTab: 0,
			api: ['/app/proposition/getPropositionList', '/app/proposition/homePaper'],
			moniPaper: {
				list: [],
				pageNo: 1,
				isLastPage: false
			},
			onlinePaper: [],
			status: 'loadmore'
		};
	},
	watch: {
		activeTab(newValue, oldValue) {
			!this.list.length && this.getPageData();
		}
	},
	computed: {
		list() {
			if (this.activeTab === 0) return this.moniPaper.list.length ? this.moniPaper.list : [];
			return this.onlinePaper.length ? this.onlinePaper : [];
		},
		isLastPage() {
			if (this.activeTab === 0) return this.moniPaper.isLastPage;
			return true;
		}
	},
	onLoad() {
		this.init();
	},
	onShow() {
		if (this.activeTab === 1 && uni.getStorageSync('chapterInfo')) {
			uni.removeStorage({
				key: 'chapterInfo'
			});
		}
		if(this.activeTab==1) this.init()
	},
	onReachBottom() {
		if (this.activeTab === 0) {
			!this.moniPaper.isLastPage && this.getPageData();
		}
	},
	methods: {
		init() {
			if (this.activeTab === 0) {
				this.moniPaper.pageNo = 1;
				this.moniPaper.list = [];
				this.moniPaper.isLastPage = false;
				this.status = 'loadmore';
			} else this.onlinePaper = [];
			return this.getPageData();
		},
		getPageData() {
			this.status = 'loading';
			const { api, activeTab, moniPaper } = this;
			return new Promise((resolve, reject) => {
				this.request
					.post(api[activeTab], {
						pageNo: moniPaper.pageNo,
						papertype: this.activeTab ? 4 : 3
					})
					.then(res => {
						if (this.activeTab === 0) {
							//模拟考试
							this.moniPaper.list = moniPaper.list.concat(res.list);
							this.moniPaper.isLastPage = res.isLastPage;
							if (res.isLastPage) this.status = 'nomore';
							else this.moniPaper.pageNo++;
						} else {
							//在线组卷
							this.onlinePaper = res;
							this.status = 'nomore';
						}
						resolve();
					})
					.finally(() => {
						!this.moniPaper.isLastPage && (this.status = 'loadmore');
					});
			});
		},
		readmore() {
			uni.navigateTo({
				url: '../onlinePaper/onlinePaper'
			});
		},
		createPaper(type) {
			uni.navigateTo({
				url: `../createPaper/createPaper?groupType=${type}`
			});
		},
		handleStart(paper) {
			this.activeTab === 1 ? this.startUserPaper(paper) : this.startMoni(paper);
		}
	}
};
</script>
<style>
page {
	background-color: #f5f5f5;
}
</style>
<style scoped lang="scss">
.simulation {
	display: flex;
	flex-direction: column;
	> view {
		position: relative;
	}
}
.btns {
	display: flex;
	justify-content: space-between;
	view {
		margin-top: 40upx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-image: url('../../static/online/bg-yellow.png');
		width: 330upx;
		height: 140upx;
		padding: 20upx 0;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		text {
			color: #fff !important;
		}
		padding-left: 30upx;
		.type {
			font-size: 32upx;
			line-height: 32upx;
			font-weight: 500;
		}
		.info {
			opacity: 0.8;
			font-size: 26upx;
			line-height: 26upx;
			font-weight: 400;
		}
	}
	view:first-child {
		margin-right: 30upx;
	}
	view:last-child {
		background-image: url('../../static/online/bg-blue.png');
	}
}
.paper-list {
	padding: 40upx 0 0 0 !important;
	.header {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #ebebeb;
		padding: 30upx;
		padding-top: 0;
		padding-bottom: 40upx;
		text {
			flex: 1;
			font-size: 36upx;
			color: #363940;
		}
	}
	.list {
		padding: 0 30upx;
		position: relative;
		.paper-item {
			height: 150upx;
			padding-left: 0;
			padding-right: 0;
			margin-bottom: 0;
			border-bottom: 1px solid #ebebeb;
			.name {
				font-size: 32upx;
			}
		}
		.paper-item:last-child {
			border-bottom: none;
		}
	}
}

.online-paper > view {
	padding: 40upx 30upx;
	background: white;
	margin-bottom: 20upx;
	.header {
		font-size: 36upx;
		font-weight: 500;
		color: #363940;
	}
}
/deep/.u-icon__label{
	font-size: 28upx!important;
	color: #999!important;
	margin-right: 16upx!important;
}
/deep/.u-icon__icon{
	font-size: 14px !important;
	top: 0px !important;
}
</style>
